Objek Sampler WebGL: Kontrol Filtering dan Wrapping Tekstur yang Terperinci

Di WebGL, tekstur sangat penting untuk menambahkan detail visual dan realisme ke adegan 3D. Meskipun penggunaan tekstur dasar cukup sederhana, mencapai kualitas visual dan performa yang optimal sering kali memerlukan kontrol yang terperinci atas cara tekstur disampling. Objek sampler WebGL menyediakan kontrol ini, memungkinkan Anda untuk mengonfigurasi mode filtering dan wrapping tekstur secara independen, yang mengarah pada peningkatan fidelitas visual dan potensi performa yang lebih baik.

Apa itu Objek Sampler?

Objek sampler adalah objek WebGL yang merangkum parameter sampling tekstur, seperti mode filtering (magnifikasi dan minifikasi) dan wrapping (bagaimana tekstur diulang atau dijepit di tepinya). Sebelum adanya objek sampler, parameter-parameter ini diatur langsung pada objek tekstur itu sendiri menggunakan gl.texParameteri. Objek sampler memisahkan parameter sampling ini dari data tekstur, menawarkan beberapa keuntungan:

• Kejelasan dan Organisasi Kode: Parameter sampling dikelompokkan ke dalam satu objek, membuat kode lebih mudah dibaca dan dipelihara.
• Dapat Digunakan Kembali: Objek sampler yang sama dapat digunakan dengan beberapa tekstur, mengurangi redundansi dan menyederhanakan perubahan. Bayangkan skenario di mana Anda menginginkan pengaturan mipmapping yang sama di semua tekstur skybox Anda. Dengan objek sampler, Anda hanya perlu mengubah pengaturan di satu tempat.
• Optimisasi Performa: Dalam beberapa kasus, driver dapat mengoptimalkan sampling tekstur secara lebih efisien saat menggunakan objek sampler. Meskipun tidak dijamin, ini adalah manfaat potensial.
• Fleksibilitas: Objek yang berbeda dapat menggunakan tekstur yang sama dengan parameter sampling yang berbeda. Misalnya, rendering medan mungkin menggunakan filtering anisotropik untuk detail dari dekat dan filtering trilinear untuk pemandangan jauh, semuanya dengan tekstur heightmap yang sama tetapi objek sampler yang berbeda.

Membuat dan Menggunakan Objek Sampler

Membuat Objek Sampler

Membuat objek sampler cukup mudah menggunakan metode gl.createSampler():

            const sampler = gl.createSampler();

            

              
                Copy
              
            
          

Jika gl.createSampler() mengembalikan null, kemungkinan peramban tidak mendukung ekstensi tersebut. Meskipun objek sampler adalah bagian dari WebGL 2, objek ini dapat diakses melalui ekstensi EXT_texture_filter_anisotropic di WebGL 1.

Mengatur Parameter Sampler

Setelah Anda memiliki objek sampler, Anda dapat mengonfigurasi mode filtering dan wrapping-nya menggunakan gl.samplerParameteri():

            gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

            

              
                Copy
              
            
          

Mari kita uraikan parameter-parameter ini:

• gl.TEXTURE_MIN_FILTER: Menentukan bagaimana tekstur difilter saat objek yang dirender lebih kecil dari tekstur. Opsi-opsinya meliputi:
• gl.NEAREST: Filtering nearest-neighbor (paling cepat, tetapi kotak-kotak).
• gl.LINEAR: Filtering bilinear (lebih halus dari nearest-neighbor).
• gl.NEAREST_MIPMAP_NEAREST: Filtering nearest-neighbor, menggunakan level mipmap terdekat.
• gl.LINEAR_MIPMAP_NEAREST: Filtering bilinear, menggunakan level mipmap terdekat.
• gl.NEAREST_MIPMAP_LINEAR: Filtering nearest-neighbor, menginterpolasi secara linear di antara dua level mipmap.
• gl.LINEAR_MIPMAP_LINEAR: Filtering trilinear (mipmapping paling halus).
• gl.TEXTURE_MAG_FILTER: Menentukan bagaimana tekstur difilter saat objek yang dirender lebih besar dari tekstur. Opsi-opsinya meliputi:
• gl.NEAREST: Filtering nearest-neighbor.
• gl.LINEAR: Filtering bilinear.
• gl.TEXTURE_WRAP_S: Menentukan bagaimana tekstur dibungkus (wrap) sepanjang koordinat S (U atau X). Opsi-opsinya meliputi:
• gl.REPEAT: Tekstur berulang secara mulus. Ini berguna untuk tekstur ubin seperti rumput atau dinding bata. Bayangkan sebuah tekstur batu bulat diterapkan pada jalan - gl.REPEAT akan memastikan batu bulat tersebut berulang tanpa henti di sepanjang permukaan jalan.
• gl.MIRRORED_REPEAT: Tekstur berulang, tetapi setiap pengulangan dicerminkan. Ini bisa berguna untuk menghindari jahitan (seam) pada tekstur tertentu. Pikirkan pola wallpaper di mana pencerminan membantu memadukan tepinya.
• gl.CLAMP_TO_EDGE: Koordinat tekstur dijepit (clamp) ke tepi tekstur. Ini mencegah tekstur berulang dan bisa berguna untuk tekstur yang tidak seharusnya berubin, seperti langit atau bidang air.
• gl.TEXTURE_WRAP_T: Menentukan bagaimana tekstur dibungkus (wrap) sepanjang koordinat T (V atau Y). Opsi-opsinya sama dengan gl.TEXTURE_WRAP_S.

Mengikat Objek Sampler

Untuk menggunakan objek sampler dengan sebuah tekstur, Anda perlu mengikatnya ke sebuah unit tekstur. WebGL memiliki beberapa unit tekstur, memungkinkan Anda menggunakan beberapa tekstur dalam satu shader. Metode gl.bindSampler() mengikat objek sampler ke unit tekstur tertentu:

            const textureUnit = 0; // Pilih unit tekstur (0-31 di WebGL2, biasanya lebih sedikit di WebGL1)
gl.activeTexture(gl.TEXTURE0 + textureUnit); // Aktifkan unit tekstur
gl.bindTexture(gl.TEXTURE_2D, texture); // Ikat tekstur ke unit tekstur yang aktif
gl.bindSampler(textureUnit, sampler); // Ikat sampler ke unit tekstur

            

              
                Copy
              
            
          

Penting: Pastikan Anda mengaktifkan unit tekstur yang benar (menggunakan gl.activeTexture) sebelum mengikat tekstur dan sampler.

Menggunakan Sampler di dalam Shader

Di dalam shader Anda, Anda akan memerlukan uniform sampler2D untuk mengakses tekstur. Anda juga perlu menentukan unit tekstur tempat tekstur dan sampler terikat:

            // Vertex Shader
attribute vec2 a_texCoord;
varying vec2 v_texCoord;

void main() {
  v_texCoord = a_texCoord;
  gl_Position = ...; // Perhitungan posisi vertex Anda
}

// Fragment Shader
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texCoord;

void main() {
  gl_FragColor = texture2D(u_texture, v_texCoord); // Sampling tekstur
}

            

              
                Copy
              
            
          

Di dalam kode JavaScript Anda, atur uniform u_texture ke unit tekstur yang benar:

            const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit); // Atur uniform ke unit tekstur

            

              
                Copy
              
            
          

Contoh: Filtering Tekstur dengan Mipmap

Mipmap adalah versi tekstur beresolusi lebih rendah yang telah dihitung sebelumnya yang digunakan untuk meningkatkan performa dan mengurangi aliasing saat merender objek dari jarak jauh. Mari kita tunjukkan cara mengonfigurasi mipmapping menggunakan objek sampler.

            // Buat sebuah tekstur
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Unggah data tekstur (misalnya, dari sebuah gambar)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// Hasilkan mipmap
gl.generateMipmap(gl.TEXTURE_2D);

// Buat sebuah objek sampler
const sampler = gl.createSampler();

// Konfigurasikan sampler untuk filtering trilinear (kualitas terbaik)
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Konfigurasikan wrapping (misalnya, repeat)
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

// Ikat tekstur dan sampler
const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(textureUnit, sampler);

// Atur uniform tekstur di shader
const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit);

            

              
                Copy
              
            
          

Tanpa mipmapping atau filtering yang tepat, tekstur yang jauh bisa tampak buram atau alias. Filtering trilinear (gl.LINEAR_MIPMAP_LINEAR) memberikan hasil yang paling halus dengan menginterpolasi secara linear di antara level mipmap. Pastikan untuk memanggil gl.generateMipmap pada tekstur setelah mengunggah data tekstur awal.

Contoh: Filtering Anisotropik

Filtering anisotropik adalah teknik filtering tekstur yang meningkatkan kualitas visual tekstur yang dilihat dari sudut miring. Ini mengurangi keburaman dan artefak yang dapat terjadi dengan mipmapping standar. Untuk menggunakan filtering anisotropik, Anda akan memerlukan ekstensi EXT_texture_filter_anisotropic.

            // Periksa ekstensi filtering anisotropik
const ext = gl.getExtension('EXT_texture_filter_anisotropic') || gl.getExtension('MOZ_EXT_texture_filter_anisotropic') || gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic');

if (ext) {
  // Dapatkan nilai anisotropi maksimum yang didukung oleh perangkat keras
  const maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);

  // Buat sebuah tekstur
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Unggah data tekstur
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  // Hasilkan mipmap
  gl.generateMipmap(gl.TEXTURE_2D);

  // Buat sebuah objek sampler
  const sampler = gl.createSampler();

  // Konfigurasikan sampler untuk filtering trilinear dan filtering anisotropik
  gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.samplerParameterf(sampler, ext.TEXTURE_MAX_ANISOTROPY_EXT, maxAnisotropy); // Gunakan anisotropi maksimum yang didukung

  // Konfigurasikan wrapping
  gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

  // Ikat tekstur dan sampler
  const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(textureUnit, sampler);

  // Atur uniform tekstur di shader
  const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit);
}

            

              
                Copy
              
            
          

Dalam contoh ini, pertama-tama kita memeriksa ekstensi filtering anisotropik. Kemudian, kita mendapatkan nilai anisotropi maksimum yang didukung oleh perangkat keras menggunakan gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT). Terakhir, kita mengatur parameter ext.TEXTURE_MAX_ANISOTROPY_EXT pada objek sampler menggunakan gl.samplerParameterf.

Filtering anisotropik sangat bermanfaat untuk tekstur yang diterapkan pada permukaan yang dilihat dari sudut curam, seperti jalan atau lantai yang dilihat dari atas.

Contoh: Clamping to Edge untuk Skybox

Skybox sering menggunakan cube map, di mana enam tekstur merepresentasikan sisi-sisi berbeda dari kubus yang mengelilingi. Saat menyampling tepi skybox, Anda biasanya ingin menghindari pengulangan tekstur. Berikut cara menggunakan gl.CLAMP_TO_EDGE dengan objek sampler:

            // Anggap Anda memiliki tekstur cube map (cubeTexture)

// Buat sebuah objek sampler
const sampler = gl.createSampler();

// Konfigurasikan filtering
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Konfigurasikan wrapping untuk clamp to edge
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); // Untuk cube map, Anda juga perlu menjepit koordinat R

// Ikat tekstur dan sampler
const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture);
gl.bindSampler(textureUnit, sampler);

// Atur uniform tekstur di shader (untuk uniform samplerCube)
const textureUniformLocation = gl.getUniformLocation(program, "u_skybox");
gl.uniform1i(textureUniformLocation, textureUnit);

            

              
                Copy
              
            
          

Untuk cube map, Anda harus mengatur gl.TEXTURE_WRAP_R serta gl.TEXTURE_WRAP_S dan gl.TEXTURE_WRAP_T. Menjepit ke tepi mencegah munculnya jahitan (seam) atau artefak di tepi sisi-sisi cube map.

Pertimbangan untuk WebGL1

Meskipun objek sampler adalah fitur inti dari WebGL2, fitur ini tersedia di WebGL1 melalui ekstensi seperti EXT_texture_filter_anisotropic. Anda perlu memeriksa dan mengaktifkan ekstensi sebelum menggunakan objek sampler. Prinsip dasarnya tetap sama, tetapi Anda perlu menangani konteks ekstensi.

Pertimbangan Performa

Meskipun objek sampler dapat menawarkan potensi keuntungan performa, penting untuk mempertimbangkan hal-hal berikut:

• Kompleksitas: Menggunakan teknik filtering yang kompleks seperti filtering anisotropik bisa jadi mahal secara komputasi. Lakukan profiling pada kode Anda untuk memastikan bahwa teknik ini tidak berdampak negatif pada performa, terutama pada perangkat kelas bawah.
• Ukuran Tekstur: Tekstur yang lebih besar membutuhkan lebih banyak memori dan bisa memakan waktu lebih lama untuk disampling. Optimalkan ukuran tekstur untuk meminimalkan penggunaan memori dan meningkatkan performa.
• Mipmapping: Selalu gunakan mipmap saat merender objek dari jarak jauh. Mipmapping secara signifikan meningkatkan performa dan mengurangi aliasing.
• Optimisasi Spesifik Platform: Platform dan perangkat yang berbeda mungkin memiliki karakteristik performa yang berbeda. Eksperimen dengan mode filtering dan wrapping yang berbeda untuk menemukan pengaturan optimal bagi audiens target Anda. Misalnya, perangkat seluler mungkin mendapat manfaat dari opsi filtering yang lebih sederhana.

Praktik Terbaik

• Gunakan Objek Sampler untuk Sampling yang Konsisten: Kelompokkan parameter sampling terkait ke dalam objek sampler untuk mendorong penggunaan kembali kode dan kemudahan pemeliharaan.
• Lakukan Profiling pada Kode Anda: Gunakan alat profiling WebGL untuk mengidentifikasi hambatan performa yang terkait dengan sampling tekstur.
• Pilih Mode Filtering yang Sesuai: Pilih mode filtering yang menyeimbangkan kualitas visual dan performa. Filtering trilinear dan filtering anisotropik memberikan kualitas visual terbaik tetapi bisa jadi mahal secara komputasi.
• Optimalkan Ukuran Tekstur: Gunakan tekstur yang tidak lebih besar dari yang diperlukan. Tekstur dengan ukuran pangkat dua (misalnya, 256x256, 512x512) terkadang dapat menawarkan performa yang lebih baik.
• Pertimbangkan Pengaturan Pengguna: Berikan pengguna opsi untuk menyesuaikan pengaturan filtering dan kualitas tekstur untuk mengoptimalkan performa di perangkat mereka.
• Penanganan Error: Selalu periksa dukungan ekstensi dan tangani error dengan baik. Jika ekstensi tertentu tidak didukung, sediakan mekanisme fallback.

Kesimpulan

Objek sampler WebGL menyediakan alat yang kuat untuk mengontrol mode filtering dan wrapping tekstur. Dengan memahami dan memanfaatkan teknik-teknik ini, Anda dapat secara signifikan meningkatkan kualitas visual dan performa aplikasi WebGL Anda. Baik Anda sedang mengembangkan game 3D yang realistis, alat visualisasi data, atau instalasi seni interaktif, menguasai objek sampler akan memungkinkan Anda untuk menciptakan visual yang menakjubkan dan efisien. Ingatlah untuk selalu mempertimbangkan implikasi performa dan menyesuaikan pengaturan Anda dengan kebutuhan spesifik aplikasi dan perangkat keras target Anda.